<script setup lang="ts">
import { useAppStore } from '@/store/modules/app';
import { ArrowLeft } from '@element-plus/icons-vue';

const appStore = useAppStore();
</script>

<template>
  <DarkModeContainer class="client-header h-56px shrink-0 flex items-center px-16px bg-primary shadow-header">
    <div class="flex-1 text-white">
      <div class="flex items-center">
        <img src="/favicon.svg" class="w-32px h-32px mr-12px" alt="Logo" />
        <h1 class="text-20px font-bold">客户端系统</h1>
      </div>
    </div>
    <div class="flex items-center gap-16px">
      <div v-if="!appStore.isMobile" class="flex items-center gap-24px text-white text-14px">
        <a href="#" class="hover:text-gray-200 transition-all">首页</a>
        <a href="#" class="hover:text-gray-200 transition-all">订单</a>
        <a href="#" class="hover:text-gray-200 transition-all">消息</a>
        <a href="#" class="hover:text-gray-200 transition-all">帮助</a>
      </div>
      <router-link to="/" class="text-white hover:text-gray-200 transition-all flex items-center">
        <el-icon class="mr-4px"><ArrowLeft /></el-icon>
        <span>返回管理系统</span>
      </router-link>
    </div>
  </DarkModeContainer>
</template>

<style scoped></style> 